<template>
    <div class="products">
      <div class="products__title">
        {{shopName}}
      </div>
        <div class="products__wrapper">
          <div class="products__list">
            <div
            class="products__item"
            v-for="item in productList"
            :key="item._id"
            >
            <img class="products__item__img" :src="item.imgUrl"/>
              <div class="products__item__detail">
                <h4 class="products__item__title">{{item.name}}</h4>
                <p class="products__item__price">
                  <span class="products__item__single">
                    <span class="products__item__yen">&yen;
                      {{item.price}} x {{item.count}}
                    </span>
                  </span>
                  <span class="products__item__total">&yen;
                    {{(item.price * item.count).toFixed(2)}}
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '../../effects/cartEffects'
export default {
  name: 'ProductList',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { productList, shopName } = useCommonCartEffect(shopId)
    return { productList, shopName }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
@import "../../style/mixins.scss";
.products {
  margin: .16rem .18rem .55rem .18rem;
  background-color: $bgColor;
  border-radius: .04rem;
  &__title {
    padding: .16rem;
    font-size: .16rem;
    color: $content-fontcolor;
  }
  &__wrapper {
    overflow-y: scroll;
    margin: 0 .18rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.6rem;
  }
  &__list {
    background-color: $bgColor;
    border-radius: 0 0 .04rem .04rem;
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0 0.16rem 0.16rem 0.16rem;
    &__img {
      padding-right: .16rem;
      width: 0.46rem;
      height: 0.46rem;
    }
    &__detail {
        flex: 1;
    }
    &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: .14rem;
        @include ellipsis;
    }
    &__price {
        display: flex;
        margin: 0.06rem 0 0 0;
        line-height: .2rem;
        font-size: .14rem;
    }
    &__total {
      text-align: right;
      flex: 1;
      color: $dark-fontColor;
    }
    &__yen {
        font-size: .14rem;
        color: $hightlight-fontColor;
    }
  }
}
</style>
